<template>
   <div class="wrap">
       <header></header>
       <article>
            <p v-for="index in 100" :key="index">2323</p>
       </article>
       <footer></footer>
   </div>
</template>

<script>
export default {
    name:'demo3',
    mounted () {
       
    }
}
</script>
<style lang="less" scoped>
  .wrap{
     width: 100%;  height: 100%; position: relative;
  }
  .wrap header,.wrap article,.wrap footer{
     position: absolute; width: 100%; min-height: 50px;
  }
  .wrap header{
      top: 0; left: 0; background: red;
  }
  .wrap footer{
      bottom: 0; left: 0; background: red;
  }
  .wrap article{
      top: 50px; bottom: 50px;overflow: scroll; background: blue; -webkit-overflow-scrolling: touch;
  }
</style>